<template>
  <div class="box">
    <!-- 导航-->
    <div class="container">
      <div class="top-nav">
        <NuxtLink class="li" to="/"><img class="logo" src="~/assets/img/logo.png" /></NuxtLink>
        <div class="nav">
          <el-form :model="searchRuleForm" :rules="rules" ref="searchRuleForm" label-width="100px"
            class="searchRuleForm" @submit.native.prevent>
            <el-form-item prop="keyword">
              <el-input placeholder="" v-model="searchRuleForm.keyword" class="input-with-select">
                <el-button class="button-search" slot="append" icon="el-icon-search" native-type="submit"
                  @click="search" />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="menu">
        <!-- <NuxtLink class="li" :class="index === navActive ? 'active' : ''" v-for="(item, index) in navList" :key="index" :to="{ path: item.path, query: item.query }">{{ item.name }}</NuxtLink> -->
        <NuxtLink class="li" :class="index === navActive ? 'active' : ''" v-for="(item, index) in categoryList"
          :key="item.id" :to="{ path: `/product/list/${item.id}`, query: { name: item.name } }">
          <img :src="item.resources && item.resources.img" alt=""> {{ item.name }}
        </NuxtLink>

      </div>
    </div>
    <!-- 导航 end-->
    <!--分类-->
    <div class="top">
      <div class="container">
        <div class="classify">
          <template v-if="categoryStyle">
            <div class="nave" @mouseenter="naveCut(-1)" @mouseleave="naveShiftOut">
              <div class="nave-li" :class="{ on: naveOn === index }" v-for="(item, index) in categoryList" :key="index"
                @mouseover="naveCut(index)">{{ item.name }}<i class="iconfont dsshop-youjiantou"></i></div>
              <!-- 二级分类-->
              <div class="secondary-navigation" v-if="categoryStyle === 1">
                <div class="list" v-for="(item, index) in categorySublevel" :key="index">
                  <NuxtLink class="dt">{{ item.name }}<i class="iconfont dsshop-youjiantou"></i></NuxtLink>
                  <div class="dd">
                    <NuxtLink class="li" v-for="(item2, index2) in item.children" :key="index2"
                      :to="{ path: 'product/list', query: { pid: item2.id, title: item2.name } }">
                      {{ item2.name }}</NuxtLink>
                  </div>
                </div>
              </div>
              <div class="secondary-navigation2" v-else-if="categoryStyle === 2">
                <NuxtLink class="li" :to="{ path: 'product/list', query: { pid: item.id, title: item.name } }"
                  v-for="(item, index) in categorySublevel" :key="index">
                  <el-image class="image" :src="item.resources && item.resources.img | smallImage(80)"
                    fit="scale-down" />
                  <div class="name">{{ item.name }}</div>
                </NuxtLink>
              </div>
              <!-- 二级导航 end-->
            </div>
          </template>
          <!-- <template v-else>
            <div class="nave">
              <NuxtLink style="color: #fff" v-for="(item, index) in categoryList" :key="index" :to="{ path: `/product/list/${item.id}`, query: { name: item.name }}">
                <div class="nave-li">
                  {{item.name}}
                </div>
              </NuxtLink>
            </div>
          </template> -->
          <el-carousel class="banner" height="460px" arrow="never">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index">
              <NuxtLink v-if="item.url" :to="item.url.split('pages/').join('')" target="_blank">
                <el-image class="image" :src="item.resources && item.resources.img" />
              </NuxtLink>
              <el-image v-else class="image" :src="item.resources && item.resources.img" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!--分类 end-->
    <!--推荐-->
    <div class="recommend container">
      <div class="title-box">
        <div class="title">STEADY SELLER</div>
        <div class="sub-title">고객이 인정한 최다 판매 상품!</div>
        <!-- <NuxtLink class="more" :to="{ path: `/product/list/${fitem.id}`, query: { name: fitem.name }}">{{$t('index.view_more')}}>></NuxtLink> -->
      </div>
      <div class="list">

        <div class="li" v-for="(item, index) in goodList" :key="index">
          <el-card class="card" shadow="hover">
            <NuxtLink :to="{ path: `/product/detail/${item.id}` }" target="_blank">
              <el-image class="image" :src="item.resources.img | smallImage(200)" fit="cover" lazy />
              <div class="name">{{ item.name }}</div>
              <div class="price">
                <div class="symbol">{{ $t('common.unit') }}</div>
                <div class="value">{{ item.order_price | thousands }}원</div>
              </div>
            </NuxtLink>
            <div class="star">
              <!-- <i class="el-icon-shopping-cart-2" @click="cart(item)"></i> -->
              <!-- <i class="el-icon-star-off" @click="toCollect(item)"></i> -->
              <span><img src="../assets/img/g.png" alt="" @click="card(item.id)"></span>
              <span><img src="../assets/img/z.png" alt="" @click="toCollect(item)"></span>
              <span>
                <NuxtLink :to="{ path: `/product/detail/${item.id}` }" target="_blank"><img src="../assets/img/t.png"
                    alt="">
                </NuxtLink>
              </span>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!--推荐 end-->
    <!-- 中间广告-->
    <div class="adv-flex container">
      <div class=" advertising" v-if="banner1">
        <NuxtLink v-if="banner1.url" :to="banner1.url.split('pages/').join('')" target="_blank">
          <el-image fit="cover" :src="banner1.resources.img" />
        </NuxtLink>
        <el-image v-else fit="cover" :src="banner1.resources.img" />
      </div>
      <div class=" advertising" v-if="banner2">
        <!-- <NuxtLink v-if="banner2.url" :to="banner2.url.split('pages/').join('')">
          <el-image fit="cover" :src="banner2.resources.img" />
        </NuxtLink>
        <el-image v-else fit="cover" :src="banner2.resources.img" /> -->
        <div class='wrapper'>
          <div class='carousel'>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>김 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>박 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>장 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>허 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>이 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>장 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>공 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>최 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
            <div class='carousel__item'>
              <div class='carousel__item-head'>
                <img src="../assets/img/user.png" alt="" srcset="">
              </div>
              <div class='carousel__item-body'>
                <p class='title'>조 * *</p>
                <p>Registered Member：회원가입했습니다~</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 是否热销 -->
    <div class="recommend container">
      <div class="title-box">
        <div class="title">실시간 Ranking Best</div>
        <div class="sub-title">지금 제일 잘나가는 중 .</div>
        <!-- <NuxtLink class="more" :to="{ path: `/product/list/${fitem.id}`, query: { name: fitem.name }}">{{$t('index.view_more')}}>></NuxtLink> -->
      </div>
      <div class="list">
        <div class="li" v-for="(item, index) in hotGoodList" :key="index">
          <el-card class="card" shadow="hover">
            <NuxtLink :to="{ path: `/product/detail/${item.id}` }" target="_blank">
              <el-image class="image" :src="item.resources && item.resources.img | smallImage(200)" fit="cover" lazy />
              <div class="name">{{ item.name }}</div>
              <div class="price">
                <div class="symbol">{{ $t('common.unit') }}</div>
                <div class="value">{{ item.order_price | thousands }}원</div>
              </div>
            </NuxtLink>
            <div class="star">
              <!-- <i class="el-icon-shopping-cart-2" @click="cart(item)"></i> -->
              <!-- <i class="el-icon-star-off" @click="toCollect(item)"></i> -->
              <span><img src="../assets/img/g.png" alt="" @click="card(item.id)"></span>
              <span><img src="../assets/img/z.png" alt="" @click="toCollect(item)"></span>
              <span>
                <NuxtLink :to="{ path: `/product/detail/${item.id}` }" target="_blank"><img src="../assets/img/t.png"
                    alt="">
                </NuxtLink>
              </span>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 是否新品 -->
    <div class="recommend container">
      <div class="title-box">
        <div class="title">NEW ITEM</div>
        <div class="sub-title">신상은 3일동안 10% 할인중</div>
        <!-- <NuxtLink class="more" :to="{ path: `/product/list/${fitem.id}`, query: { name: fitem.name }}">{{$t('index.view_more')}}>></NuxtLink> -->
      </div>
      <div class="list">
        <div class="li" v-for="(item, index) in newGoodList" :key="index">
          <el-card class="card" shadow="hover">
            <NuxtLink :to="{ path: `/product/detail/${item.id}` }" target="_blank">
              <el-image class="image" :src="item.resources && item.resources.img | smallImage(200)" fit="cover" lazy />
              <div class="name">{{ item.name }}</div>
              <div class="price">
                <div class="symbol">{{ $t('common.unit') }}</div>
                <div class="value">{{ item.order_price | thousands }}원</div>
              </div>
            </NuxtLink>
            <div class="star">
              <!-- <i class="el-icon-shopping-cart-2" @click="cart(item)"></i> -->
              <!-- <i class="el-icon-star-off" @click="toCollect(item)"></i> -->
              <span><img src="../assets/img/g.png" alt="" @click="card(item.id)"></span>
              <span><img src="../assets/img/z.png" alt="" @click="toCollect(item)"></span>
              <span>
                <NuxtLink :to="{ path: `/product/detail/${item.id}` }" target="_blank"><img src="../assets/img/t.png"
                    alt="">
                </NuxtLink>
              </span>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 介绍 -->
    <div class="recommend container">
      <div class="title-box">
        <div class="title">그룹소개</div>
        <div class="sub-title">2024.11.24</div>
      </div>
      <div class="content">
        <div class="content-box">
          <img src="https://wmskr-erps.oss-cn-hangzhou.aliyuncs.com/adv/pic1.jpg" alt="">
          <div class="text">
            <p>중국본사</p>
            <p>자세히 보기</p>
          </div>
        </div>
        <div class="content-box">
          <img src="https://wmskr-erps.oss-cn-hangzhou.aliyuncs.com/adv/pic2.jpg" alt="">
          <div class="text">
            <p>회의실</p>
            <p>자세히 보기</p>
          </div>
        </div>
        <div class="content-box">
          <img src="https://wmskr-erps.oss-cn-hangzhou.aliyuncs.com/adv/pic3.jpg" alt="">
          <div class="text">
            <p>직원휴게실</p>
            <p>자세히 보기</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="adv" v-if="botadv">
        <NuxtLink v-if="botadv.url" :to="botadv.url.split('pages/').join('')">
          <el-image fit="cover" :src="botadv.resources.img" />
        </NuxtLink>
        <el-image v-else fit="cover" :src="botadv.resources.img" />
      </div>
    </div>
    <div class="detail">
      <IDetail ref="detail"></IDetail>
    </div>
  </div>
</template>

<style lang='scss' scoped>
@import './index/scss/index';
</style>

<script>
import js from './index/js/index'
export default js
</script>
